<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>商品详情</title>
<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" href="${ctx}/css/pro_details.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>

<body>
	<!--头部-->
	<div class="header"><#include "common/top.html"></div>
	<!--内容-->
	<div class="middle">
		<div class="box">
			<div class="img_info">
				<!-- 大图片 -->
				<div class="big">
					<img src="${ctx}/img/upload/${shops.image}" alt="" />
					<div class="box1"></div>
				</div>

				<div class="thumb">
					<div>
						<ul>
							<!--大图片下的中等图片 -->
							<li class="turn"><img src="${ctx}/img/upload/${shops.image}"
								alt="" /></li>
							<li><img src="${ctx}/img/upload/${shops.image}" alt="" /></li>
							<li><img src="${ctx}/img/upload/${shops.image}" alt="" /></li>
						</ul>
					</div>
					<span class="left"><img src="${ctx}/img/arrow_left.png"
						alt="" /></span> <span class="right"><img
						src="${ctx}/img/arrow_right.png" alt="" /></span>
				</div>
			</div>
			<div class="pro_info">
				<div class="original"></div>
				<!-- 商品标题 -->
				<h5>${shops.title}</h5>
				<span>收藏</span>
				<div>
					<p>¥${shops.price}</p>
					<span>特色：${shops.description}</span> <span>优惠：满2件，总价打8.8折；加入购物车可见</span>
					<ul>
						<li>月销量 647</li>
						<li>评价 647</li>
						<li>待评价 647</li>
					</ul>
				</div>
				<dl class="choose">
					<dt>颜色分类</dt>
					<dd>
						<img width="50px" height="50px"
							src="${ctx}/img/upload/${shops.image}" />
					</dd>
				</dl>
				<dl class="quantity">
					<dt>数量</dt>
					<dd>
						<input type="text" id="buynum" class="quantity_num" value="1">
						<div class="add" id="updatNum">
							<span></span>
						</div>
						<div class="reduce" id="updatNum">
							<span></span>
						</div>
					</dd>
					<dd>库存${shops.storage}件</dd>
				</dl>
				<input type="hidden" id="shopId" value="${shops.id}"> <a
					href="${ctx}/customer/confirm/toConfirmOrder?cid=${shops.id}"
					class="purchase">立即购买</a> <a href="javascript:void(0)"
					class="add_to_cart" id="addCar">加入购物车</a>

			</div>

			<div class="parameters">
				<h4>产品参数</h4>
				<ul>
					<li>产品名称：${shops.title}</li>
					<li>C产品型号：FXB30FZ16Q-60 3.0L 600</li>
					<li>电饭煲多功能: 加速煮 蛋糕 预约 定时 煮饭</li>
					<li>容量：4L</li>
					<li>内胆材质：陶金</li>
					<li>颜色：黑白灰</li>
					<li>适用人数：4-6人</li>
					<li>控制方式：微电脑式</li>
					<li>加热方式：三维立体加热</li>
				</ul>
			</div>s
			<div class="tabs">
				<span id="option1" class="pro_detail on">产品详情</span> 
				<span id="option2" class="pro_detail">商品评价</span>
			</div>
		<!-- 	<script type="text/javascript">
				$(function() {
					
				})
			</script> -->

			<ul class="details">
				<li><img src="${ctx}/img/pro_details_01.jpg"><span></span>
					<div>
						分体式构成，<br />妈妈说提锅方便清洗。
						<p>轻便提锅，清洁轻松</p>
					</div></li>
				<li><img src="${ctx}/img/pro_details_02.jpg"><span></span>
					<div>
						分体式构成，<br />妈妈说提锅方便清洗。
						<p>轻便提锅，清洁轻松</p>
					</div></li>
				<li><img src="${ctx}/img/pro_details_03.jpg"><span></span>
					<div>
						分体式构成，<br />妈妈说提锅方便清洗。
						<p>轻便提锅，清洁轻松</p>
					</div></li>
				<li><img src="${ctx}/img/pro_details_04.jpg"><span></span>
					<div>
						分体式构成，<br />妈妈说提锅方便清洗。
						<p>轻便提锅，清洁轻松</p>
					</div></li>
			</ul>
			<div class="evalution">
				<ul class="score">
					<li><img src="${ctx}/img/evalution_quantity.png" /> <span>质量好</span>
					</li>
					<li><img src="${ctx}/img/evalution_practicability.png" /> <span>很实用</span>
					</li>
					<li><img src="${ctx}/img/evalution_transfer.png" /> <span>物流快</span>
					</li>
					<li><img src="${ctx}/img/evalution_server.png" /> <span>服务一流</span>
					</li>
					<li><img src="${ctx}/img/evalution_performance.png" /> <span>性价比高</span>
					</li>
					<li><img src="${ctx}/img/evalution_easy.png" /> <span>简单易用</span>
					</li>
					<li><img src="${ctx}/img/evalution_appearance.png" /> <span>外观不错</span>
					</li>
				</ul>
				<ul class="evalute">
					<li>
						<div class="account">
							<span class="avatar"><img
								src="${ctx}/img/evaluation_account_img.jpg" /></span> <span
								class="account_name">账号</span>
						</div>
						<div>
							<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！
								包装很好，很满意。</p>
							<span class="time">2017-4-22</span> <a href="javascript:void(0)"
								class="addition">追加评论</a> <img
								src="${ctx}/img/evalute_img01.jpg" /> <img
								src="${ctx}/img/evalute_img02.jpg" /> <img
								src="${ctx}/img/evalute_img03.jpg" />
						</div>
					</li>
					<li>
						<div class="account">
							<span class="avatar"><img
								src="${ctx}/img/evaluation_account_img.jpg" /></span> <span
								class="account_name">账号</span>
						</div>
						<div>
							<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！
								包装很好，很满意。</p>
							<span class="time">2017-4-22</span>
						</div>
					</li>
					<li>
						<div class="account">
							<span class="avatar"><img
								src="${ctx}/img/evaluation_account_img.jpg" /></span> <span
								class="account_name">账号</span>
						</div>
						<div>
							<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！
								包装很好，很满意。</p>
							<span class="time">2017-4-22</span> <a href="javascript:void(0)"
								class="addition">追加评论</a> <img
								src="${ctx}/img/evalute_img01.jpg" /> <img
								src="${ctx}/img/evalute_img02.jpg" /> <img
								src="${ctx}/img/evalute_img03.jpg" />
						</div>
					</li>
				</ul>
				<div class="page_list">
					<ol class="page">
						<li><a href="javascript:void(0)">上一页</a></li>
						<li class="current"><a href="javascript:void(0)">1</a></li>
						<li><a href="javascript:void(0)">2</a></li>
						<li><a href="javascript:void(0)">3</a></li>
						<li><a href="javascript:void(0)">4</a></li>
						<li><a href="javascript:void(0)">...</a></li>
						<li><a href="javascript:void(0)">下一页</a></li>
					</ol>
				</div>
			</div>
			<div class="others">
				<h4>其他商品</h4>
				<ol>
					<#list otherShops as otherShop>
					<li><a
						href="${ctx}/customer/shop/toPro_details?did=${otherShop.id}"><img
							src="${ctx}/img/upload/${otherShop.image}" alt="" /></a>
						<h6>
							<a href="${ctx}/customer/shop/toPro_details?did=${otherShop.id}">电炖锅紫砂锅煮粥锅电砂锅迷你全自动文火紫砂养生宝宝陶瓷煲汤锅</a>
						</h6> <span class="${otherShop.price}">¥<i>199</i></span> <span
						class="purchase"><a
							href="${ctx}/customer/buy/toConfirmOrder">点击购买</a></span>
						<p>
							<span class="quantity">销售量 199</span> <span class="stock">库存
								${otherShop.storage}件</span>
						</p></li> </#list>
				</ol>
			</div>
		</div>
	</div>
	<!--尾部-->
	<#include "common/bottom.html">
	<!-- 引入jQuery框架 -->
	<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery-migrate-1.2.1.js"></script>
	<script type="text/javascript" src="js/shopCar.js"></script>
	<script type="text/javascript" src="js/pro_details.js"></script>
	<script type="text/javascript" src="js/page.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#addCar").click(function() {
				//商品id
				var shopsId = $("#shopId").val();
				//商品数量
				var buyNum = $("#buynum").val();
				console.log(shopsId + buyNum)
				//异步请求
				$.post("${ctx}/customer/buy/addShopCar", {
					"shopsId" : shopsId,
					"buyNum" : buyNum
				}, function(data) {
					if (data.status == 'success') {
						alert("添加成功!");
						//重新并更新商品数量
						location.reload();
					}
				})
			})
			$("#option2").click(function() {
				window.location.href="${ctx}/customer/comment/toComment?cid=${shops.id}";
			});
		})
	</script>
</body>

</html>